<!--
 * @Autor: dingxiaolin
 * @Date: 2021-05-14 09:38:38
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-05-17 14:07:46
-->
<template>
    <div class="selection">
        <div class="titlebar" @click="goListPage">整机月发货量统计<span class="unit">(台)</span></div>
    </div>
    <div class="selection conditon">
        <yearMonth @emit="getTime"></yearMonth>
        <div class="line select">|</div>
        <model @emit="getModel" :modelList="$store.getters['fahuo/modelList']"></model>
        <div class="line select">|</div>
        <stock @emit="getStock" :stockList="$store.getters['fahuo/stockList']"></stock>
    </div>
    <div id="monthDeliveryPie" v-if="list.length > 0"></div>
    <div id="noData" v-else>暂无数据</div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, toRefs, watch, computed, nextTick, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Sales, Delivery } from '@/http';
import { type } from '@/http/interface';
import { YearMonth, Model, Stock } from '@/components';
import dateJs from 'dayjs';
import * as echarts from 'echarts';

export default defineComponent({
    name: 'monthDeliveryPie',
    components: { YearMonth, Model,Stock },
    props: {},
    emits: [],
    setup(props, ctx) {
        const router = useRouter();
        const state = reactive({
            modelType: '',
            stockType: '',
            startTime: dateJs(new Date()).format('YYYY-MM'),
            endTime: '',
            chartDataList: [] as any,
            legendList: [] as any,
            list: [] as any,
        });
        onMounted(() => {
            let time = dateJs(state.startTime).add(1, 'month');
            state.endTime = time['$y'] + '-' + addZeroPrefix(time['$M'] + 1);
            getData();
        });
        const getModel = (v) => {
            state.modelType = v;
            getData();
        };
        const getStock = (v) => {
            state.stockType = v;
            getData();
        };
        const goListPage = () => {
            router.push('fhTable')
        }
        const getTime = (v) => {
            state.startTime = v;
            let time = dateJs(v).add(1, 'month');
            state.endTime = time['$y'] + '-' + addZeroPrefix(time['$M'] + 1);
            getData();
        };
        function addZeroPrefix(n) {
            const str = n.toString();
            return str[1] ? str : `0${str}`;
        }
        const getData = () => {
            const formList = {
                jx: state.modelType == '全部' ? '' : state.modelType,
                startTime: state.startTime,
                endTime: state.endTime,
                pageNumber: 1,
                pageSize: 10,
            };
            Delivery.GetDeliveryByArea(formList).then((res: any) => {
                state.list = res;
                if (state.list.length == 0) return;
                state.legendList = [];
                state.chartDataList = [];
                res.splice(0, 10).forEach((item) => {
                    state.legendList.push(item.arg1);
                    state.chartDataList.push({ name: item.arg1, value: item.val1 });
                });
                nextTick(() => {
                    draw(state.legendList, state.chartDataList);
                });
            });
        };
        /**绘制图表 */
        const draw = (data1, data2) => {
            var option = {
                // backgroundColor: 'rgb(10,36,68)',
                color: [
                    '#F19611 ',
                    '#0095FE',
                    '#162D86',
                    '#0096FF',
                    '#05F8FF',
                    '#FFD985',
                    '#FACDAA',
                    '#F4A49E',
                    '#EE7B91',
                    '#E85285',
                    '#BE408C',
                    '#942D93',
                    '#171E6D',
                    '#1E3388',
                    '#27539B',
                    '#3073AE',
                    '#3993C2',
                    '#42B3D5',
                    '#75C6D1',
                    '#75C6D1',
                    '#A9DACC',
                    '#A9DACC',
                    '#D2EDC8',
                    '#E2F8DA',
                ],
                grid: {
                    left: '2%',
                    top: '10%',
                    bottom: '1%',
                    right: '1%',
                    containLabel: true,
                },

                legend: {
                    orient: 'horizontal',
                    bottom: '0%',
                    itemWidth: 6, //修改icon图形大小
                    itemHeight: 6, //修改icon图形大小
                    formatter: '{a|{name}}',
                    textStyle: {
                        fontSize: 10,
                        color: '#CACACA',
                        rich: {
                            a: {
                                width: 35,
                            },
                        },
                    },
                    // data: ['片区1', '片区2', '片区3', '片区4', '片区5', '片区6', '片区7', '片区8', '片区9', '片区10'],
                    data: data1,
                },
                calculable: true,
                series: [
                    {
                        type: 'pie',
                        radius: ['6%', '8%'],
                        center: ['50%', '45%'],
                        hoverAnimation: false,
                        labelLine: {
                            normal: {
                                show: false,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        data: [
                            {
                                name: '',
                                value: 0,
                                itemStyle: {
                                    normal: {
                                        color: '#202F57 ',
                                    },
                                },
                            },
                        ],
                    },

                    {
                        stack: 'a',
                        type: 'pie',
                        radius: ['12%', '60%'],
                        center: ['50%', '45%'],
                        roseType: 'area',
                        zlevel: 10,
                        label: {
                            normal: {
                                formatter: '{b}: {c}台',
                                borderWidth: 0,
                                borderRadius: 4,
                                padding: [0, -50],
                                height: 40,
                                fontSize: 10,
                                align: 'center',
                                rich: {
                                    b: {
                                        fontSize: 10,
                                        lineHeight: 5,
                                        color: '#41B3DC',
                                    },
                                },
                                color: '#fff',
                            },
                        },
                        labelLine: {
                            normal: {
                                show: true,
                                length: 10,
                                length2: 35,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                // 设置扇形的阴影
                                shadowBlur: 10,
                                shadowColor: 'rgb(0,0,0,.5)',
                                shadowOffsetX: -5,
                                // shadowOffsetY: 5
                            },
                        },
                        data: data2,
                    },
                ],
            };
            let myChart = echarts.init(document.getElementById('monthDeliveryPie') as HTMLElement);
            window.addEventListener('resize', () => {
                myChart.resize();
            });
            myChart.setOption(option);
        };

        return {
            ...toRefs(state),
            getTime,
            getModel,
            getStock,
            goListPage
        };
    },
});
</script>

<style lang="scss" scoped>
#monthDeliveryPie {
    margin: 0 20px;
    width: calc(100%-40px);
    height: 300px;
}
#noData {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
